$(function () {

  var data = []
  var cidx = 0;
  var countrys = [];


  var Scene1 = function () {};
  Scene1.prototype = {
    _render : function (id) {
      var self = this;
      self._loadPage();
    },
    _getDate : function () {
      var countryDate = [{
        id:'usa',
        url:'usa.png',
        resource:['usal.jpg','usap.jpg','usaf.jpg']
      },{
        id:'fra',
        url:'fra.png',
        resource:['fral.jpg','frap.jpg','fraf.jpg']
      },{
        id:'egy',
        url:'egy.png',
        resource:['egyl.jpg','egyp.jpg','egyf.jpg']
      }];


      data = countryDate;
    },
    _loadPage : function (data) {
      var html = '<div class="scene scene1">'+
                    '<img src="../images/earth.png" class="earth start">'+
                    '<img src="images/child.png" class="child"/>'+
                    '<img src="images/plane.png" class="plane"/>'+
                    '<img src="images/planego.png" class="plane planego"/>'+

                    '<div class="shade">'+
                    '<div class="btn-box">'+
                    '<img src="../images/start.png" class="btn startgame">'+
                    '</div>'+
                    '</div>'+
                  '</div>';

      $('.content').children().remove();
      $('.content').append(html);
      this._bindEvent();
    },
    _bindEvent : function(){
      var scene1Start = false;
      $('.scene1 .start').on('click',function () {
        if (scene1Start){
          var id = $(this).attr('data_id');
          $('.scene1').remove();
          countrys.push(id);
          scene2._render(id);
          cidx += 1;
          return;
        }
        if($('.scene1 .child').is(':hidden')){
          return;
        }
        if($(this).hasClass('active')){
          $(this).removeClass('active');
          $(this).attr('src','images/'+data[cidx].url);
          $(this).attr('data_id',data[cidx].id);
        }else{
          $(this).attr('src','images/earth.png');
          $(this).addClass('active');
          $(this).removeAttr('data_id');
        }
      });
      $('.scene1 .child').on('click',function () {
        var id = $('.scene1 .earth').attr('data_id');
        if(id != null && id != ''){
          $(this).hide();
          $('.scene1 .plane').hide();
          $('.scene1 .planego').show();
        }
      });
      $('.scene1 .planego').on('click',function () {
        $(this).animate({
          right:'160px'
        },'10000','linear');
        $(this).animate({
          right:'320px'
        },'10000','linear')
        $(this).animate({
          right:'480px'
        },'10000','linear')
        $(this).animate({
          right:'640px'
        },'10000','linear',function () {
          $(this).hide();
          scene1Start = true;
        })
      });
      $('.scene1 .startgame').on('click',function () {
        scene3._render();
      });
    },
  }
  var scene1 = new Scene1();
  scene1._getDate();
  scene1._render();










  var Scene2 = function () {};
  var imgs = [];
  Scene2.prototype = {
    _render : function (id) {
      var self = this;
      imgs = [];
      $.each(data,function (i,item) {
        if (item.id == id){
          self._loadPage(item.resource);
        }
      })
    },
    _loadPage : function (data) {
      var self = this;
      var html = '<div class="scene scene2">'+
                    '<div class="country-list">'+
                      '<div class="item">'+
                        '<img src="../images/'+data[0]+'" class="ci" data_i = "1">'+
                      '</div>'+
                      '<div class="item">'+
                        '<img src="../images/'+data[1]+'" class="ci" data_i = "2">'+
                      '</div>'+
                      '<div class="item">'+
                        '<img src="../images/'+data[2]+'" class="ci" data_i = "3">'+
                      '</div>'+
                    '</div>'+
                  '</div>'
      $('.content').children().remove();
      $('.content').append(html);
      this._bindEvent();
    },
    _bindEvent : function(){
      $('.country-list .ci').on('click',function () {
        if($(this).hasClass('cimax')){
          $(this).removeClass('cimax');
          if(imgs.indexOf($(this).attr('data_i')) < 0){
            imgs.push($(this).attr('data_i'));
          }
          if(imgs.length >= 3){
            scene1._render();
            if(countrys.length >= 3){
              $('.scene1 .shade').show();
            }
          }

        }else{
          $(this).addClass('cimax');
        }
      });
    },
  }
  var scene2 = new Scene2();
  /*scene2._render('us');*/


  var Scene3 = function () {}
  Scene3.prototype = {
    _render : function () {
      var self = this;
      var newary = [];
      var imgurls = ['usal.jpg','usap.jpg','usaf.jpg','egyl.jpg','egyp.jpg','egyf.jpg','fral.jpg','frap.jpg','fraf.jpg'];

      for(var i = 0; i < 3; i++){
        var id = Math.ceil(Math.random()*imgurls.length-1);
        newary.push({
          id:i+1,
          url:imgurls[id]
        });
        newary.push({
          id:i+1,
          url:imgurls[id]
        });
        imgurls.splice($.inArray(imgurls[id],imgurls),1);
        newary.sort(function() {
          return Math.random()>.5 ? -1 : 1;
        });
      }
      self._loadPage(newary);
    },
    _loadPage : function (data) {

      var html = '<div class="scene scene3">'+
                '<div class="img-list">'+
                '</div>'+
                '</div>'+
                '<div class="shade">'+
                '<div class="btn-box">'+
                '<img src="../images/restart.png" class="btn restart">'+
                '<img src="../images/again.png" class="btn again">'+
                '</div>'+
                '</div>'

      $('.content').children().remove();
      $('.content').append(html);
      $.each(data,function (i,item) {
        var box = '<div class="layout">'+
                      '<div class="item" data_id="'+item.id+'">'+
                        '<img src="../images/'+item.url+'" class="ci">'+
                        '<img src="../images/bg.png" class="bg">'+
                      '</div>'+
                    '</div>';
        $('.scene3 .img-list').append(box);
      })
      this._bindEvent();
    },
    _bindEvent : function(){
      var oldid = '';
      var start = 0;
      $('.scene3 .item').on('click',function () {
        /*$(".scene3 .item").removeClass("active");*/
        if($(this).hasClass('active')){
          return;
        }


        $(this).addClass('active');
        if($(this).attr('data_id') == oldid){
          var aid = $(this).attr('data_id');
          setTimeout(function () {
            $('.scene3 .item[data_id=\''+aid+'\']').parent('.layout').addClass('closed');
            $('.scene3 .item[data_id=\''+aid+'\']').remove();
            start += 1;


            if(start >= 3){
              $('.shade').show();
            }

          },400);
        }else{
          oldid = $(this).attr('data_id');
          $('.scene3 .item').removeClass('active');
          $(this).addClass('active');
        }

      })

      $('.shade .restart').on('click',function () {
        data = []
        cidx = 0;
        countrys = [];
        imgs = [];
        scene1._getDate();
        scene1._render();
      })
      $('.shade .again').on('click',function () {
        scene3._render();
      })
    },
  }
  var scene3 = new Scene3();

});
